<template>
  <div class="add-spu-img-con">
    <div class="tab">
      <div class="tab-item" :class="[currentTab == '1' ? 'active' : '']" @click="handleTabClick('1')">产品图</div>
      <div class="tab-item" :class="[currentTab == '2' ? 'active' : '']" @click="handleTabClick('2')">视频</div>
      <div class="tab-item" :class="[currentTab == '3' ? 'active' : '']" @click="handleTabClick('3')">A+</div>
    </div>
    <a-space class="mt10 mb10" v-if="productPicList[0] || productVideoList[0] || productAddPicList[0]">
      <a-button class="gray-outline" @click="download">下载</a-button>
      <a-checkbox v-model="checkedAll" @change="selAll">全选</a-checkbox>
    </a-space>
    <div v-if="currentTab == '1'" class="clearfix">
      <ul class="img-con clearfix fl" v-if="productPicList[0]">
        <li v-for="(item, index) of productPicList" :data-index="index" class="fl">
          <div class="master-map" v-if="index == 0"> 主图 </div>
          <div class="tag-map" :style="{ left: index != 0 ? '5px' : '45px' }" v-if="item.tag"> {{ item.tag }} </div>

          <div class="check-box">
            <a-checkbox v-model="item.checked"></a-checkbox>
          </div>

          <div class="mask">
            <div class="btn-con">
              <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index)" />
            </div>
          </div>
          <a-image :src="getImgUrl(item.url)" width="100%" height="160px" />
          <div class="footer-info">
            <span>{{ item.tag }}</span>
            <span v-if="item.width">({{ item.width }}×{{ item.height }})</span>
          </div>
        </li>
        <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="productPicList.map((e:any) => e.url)" />
      </ul>
      <a-empty v-else />
    </div>
    <div v-if="currentTab == '2'" class="clearfix">
      <ul v-if="productVideoList[0]" class="img-con clearfix fl">
        <li v-for="(item, index) of productVideoList" class="fl">
          <div class="check-box">
            <a-checkbox v-model="item.checked"></a-checkbox>
          </div>

          <!-- <div class="mask">
            <div class="btn-con">
              <icon-delete class="cursor" @click="productVideoList.splice(index, 1)" />
            </div>
          </div> -->
          <video :src="item.url" style="width: 160px; height: 160px" width="160" height="160" controls></video>
          <!-- <a-image :src="item.url" width="100%" height="100%" /> -->
        </li>
      </ul>
      <a-empty v-else />
    </div>
    <div v-if="currentTab == '3'" class="clearfix">
      <ul class="img-con clearfix fl" v-if="productAddPicList[0]">
        <li v-for="(item, index) of productAddPicList" class="fl">
          <div class="master-map" v-if="index == 0"> 主图 </div>
          <div class="check-box">
            <a-checkbox v-model="item.checked"></a-checkbox>
          </div>

          <div class="mask">
            <div class="btn-con">
              <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index)" />
            </div>
          </div>
          <a-image :src="getImgUrl(item.url)" width="100%" height="160px" />
          <div class="footer-info">
            <span>{{ item.tag }}</span>
            <span v-if="item.width">({{ item.width }}×{{ item.height }})</span>
          </div>
        </li>
        <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="productAddPicList.map((e:any) => e.url)" />
      </ul>
      <a-empty v-else />
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, onMounted, nextTick } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { uplaodImg, uploadFile } from '@/api/base'
  import _ from 'lodash-es'
  import JSZip from 'jszip'
  import FileSaver from 'file-saver'
  export default defineComponent({
    props: ['type', 'info'],
    setup(props: any, { emit }) {
      const data: any = reactive({
        currentTab: '1',
        current: '1',
        checkedAll: false,
        visible: false,
        productPicList: [],
        productVideoList: [],
        productAddPicList: [],
      })

      const showImgPre = (index: number) => {
        data.current = index
        data.visible = true
      }

      const selAll = (val: boolean) => {
        if (data.currentTab == '1') {
          data.productPicList.map((e: any) => {
            e.checked = val
            return e
          })
        } else if (data.currentTab == '2') {
          data.productVideoList.map((e: any) => {
            e.checked = val
            return e
          })
        } else {
          data.productAddPicList.map((e: any) => {
            e.checked = val
            return e
          })
        }
      }

      const download = () => {
        if (data.currentTab == '1') {
          let list = data.productPicList.filter((e: any) => e.checked)
          if (!list[0]) {
            return Message.error('请选择产品图')
          }
          downloadBtn(list, '产品图')
          data.productPicList.map((e: any) => (e.checked = false))
        } else if (data.currentTab == '2') {
          let list = data.productVideoList.filter((e: any) => e.checked)
          if (!list[0]) {
            return Message.error('请选择视频')
          }
          downloadBtn(list, '视频')
          data.productVideoList.map((e: any) => (e.checked = false))
        } else {
          let list = data.productAddPicList.filter((e: any) => e.checked)
          if (!list[0]) {
            return Message.error('请选择A+图')
          }
          downloadBtn(list, 'A+')
          data.productAddPicList.map((e: any) => (e.checked = false))
        }

        data.checkedAll = false
      }

      const handleTabClick = (i: string) => {
        data.currentTab = i
        data.checkedAll = false
      }

      const downloadBtn = (fileList: any, blogTitle: string) => {
        var zip: any = new JSZip()
        var promises = []
        let cache = {}
        for (let item of fileList) {
          // item.feilePath为文件链接地址
          // item.fileName为文件名称
          if (item.url) {
            const promise = getImgArrayBuffer(item.url).then((fileData) => {
              // 下载文件, 并存成ArrayBuffer对象(blob)
              let fileName = item.url.split('/')[item.url.split('/').length - 1]
              zip.file(fileName, fileData, { binary: true }) // 逐个添加文件
              cache[item.fileName] = fileData
            })
            promises.push(promise)
          } else {
            // feilePath地址不存在时提示
            alert(`附件${item.fileName}地址错误，下载失败`)
          }
        }
        Promise.all(promises)
          .then(() => {
            zip.generateAsync({ type: 'blob' }).then((content: any) => {
              // 生成二进制流
              FileSaver.saveAs(content, blogTitle) // 利用file-saver保存文件  blogTitle:自定义文件名
            })
          })
          .catch((res) => {
            alert('文件压缩失败')
          })
      }

      const getImgArrayBuffer = (url: string) => {
        return new Promise((resolve, reject) => {
          //通过请求获取文件blob格式
          let xmlhttp = new XMLHttpRequest()
          xmlhttp.open('GET', url, true)
          xmlhttp.responseType = 'blob'
          xmlhttp.onload = function () {
            if (xmlhttp.status == 200) {
              resolve(xmlhttp.response)
            } else {
              reject(xmlhttp.response)
            }
          }
          xmlhttp.send()
        })
      }

      const init = (info: any) => {
        data.currentTab = '1'
        data.productPicList = info?.productPicList || []
        data.productAddPicList = info?.productAddPicList || []
        data.productVideoList = info?.productVideoList || []
      }

      const getImgUrl = (url: string) => {
        let newStr = ''
        if (url.indexOf('cdn.shopify.com')) {
          newStr = `https://erpapi.selleroa.com/v1/aliyun/oss/getAmazonImage?url=${url}`
        } else {
          newStr = url
        }
        return newStr
      }

      return {
        ...(toRefs(data) as any),
        init,
        showImgPre,
        selAll,
        download,
        handleTabClick,
        getImgUrl,
      }
    },
  })
</script>

<style lang="less" scoped>
  :deep(.arco-upload-picture-card) {
    width: 160px;
    height: 160px;
  }
  :deep(.arco-upload-list-picture) {
    width: 160px;
    height: 160px;
  }

  .custom-uplaod-btn {
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }

  .add-spu-img-con {
    margin: 10px;
    .tab {
      display: flex;
      .tab-item {
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 80px;
        border: 1px solid #d7d7d7;
        cursor: pointer;
      }
      .active {
        border-color: #5181f2;
        color: #5181f2;
      }
    }

    :deep(.arco-upload-list-picture) {
      display: none;
    }

    .img-con {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 160px;
        height: 190px;
        margin-right: 10px;
        margin-bottom: 5px;
        position: relative;

        .check-box {
          position: absolute;
          top: 5px;
          right: 5px;
          z-index: 2;
        }

        .master-map {
          position: absolute;
          left: 0;
          top: 0;
          background-color: #2da641;
          text-align: center;
          height: 20px;
          width: 40px;
          z-index: 5;
          font-size: 12px;
          line-height: 20px;
          color: white;
        }

        .tag-map {
          position: absolute;
          // left: 45px;
          top: 0;
          background-color: #d8f0ea;
          text-align: center;
          height: 20px;
          width: 40px;
          z-index: 5;
          font-size: 12px;
          line-height: 20px;
          // color: white;
        }

        &:hover .mask {
          display: block;
        }
        .mask {
          display: none;
          width: 100%;
          height: 160px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          background: rgba(0, 0, 0, 0.5);

          .btn-con {
            width: 160px;
            color: white;
            font-size: 18px;
            text-align: center;
            margin-top: 76px;
            align-items: center;
          }
        }
        .footer-info {
          height: 25px;
          line-height: 25px;
          text-align: center;
          font-size: 12px;
          background-color: #d7d7d7;
        }
      }
    }
  }
</style>
